<template id="apply">
    <div>
        <div class="apply"  v-for="(item, index) in orders" >
            <div class="apply_border"></div>
            <div class="apply_1">
                <span>{{item.send}}</span>
                <span>{{item.order_sn}}</span>
                <span>{{item.pay_time}}</span>
            </div>
			
			
            <div class="apply_2" v-show="item.num == 1"   @click="order_info(item.order_id)"  >
                <span>{{item.goods[0]['goods_name']}}</span>
				<span>{{item.goods[0]['goods_share']}} {{item.goods[0]['goods_weight']}}</span>
				<span>×{{item.goods[0]['goods_number']}}</span>
				<img v-bind:src="item.goods[0]['goods_thumb']" alt="">
            </div>
			
            <div class="all_payment1_2" v-show="item.num > 1"   @click="order_info(item.order_id)"  >
				<div v-for="(v, k) in item.goods">
					<img v-bind:src="v['goods_thumb']" alt="">
				</div>
            </div>
			
			
            <p class="apply_p">
                  共{{item.num}}件商品 合计 ：<time>¥{{item.order_amount}}</time><span v-show="item.is_fee == 1">(包邮)</span>
            </p>
            <p class="apply_p1">
                <span @click="call()">联系客服</span>
                <span @click="refund(item.order_id,item.num)">申请退款</span>
                <span v-show='disp'></span>
            </p>

        </div>
		
		<div class="jia_more" id="page" data-page="1" @click="more()">加载更多</div>
    </div>
</template>
<script>
    export default {
        name:'apply',
		data(){
            return{
                orders:[],
				mode:'back_list',
                disp:false,
            }
        },
	    mounted:function(){
			//初始化
			var page    = 1;
			var is_more = 0;
			this.getItems(this.mode,page,is_more);

        },
        methods:{
			getItems:function(mode,page,is_more){
				if(!page || page == 0){
					page = 1;
				}

			    let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Users.php?mode='+mode+'&page='+page;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                        let temp = res.data;
                        if(temp.code == 200){
                        if(is_more){
                            this.GLOBAL.merge_array(this.orders,temp.data);
                            $("#page").attr('data-page',page);
                            
                        }else{
                            this.orders = temp.data;
                        }
                    
                    }else{
                         this.GLOBAL.center_error(this,temp);
                    }
                })
			},
			more:function(){
				var page = parseInt($("#page").attr('data-page'));
				page ++;
				var is_more = 1;
				this.getItems(this.mode,page,is_more);
			},
            refund:function(order_id,num){
				if(num > 1){
					 this.$router.push('/refund?order_id='+order_id);
				}else{
					 this.$router.push('/refundDetail?order_id='+order_id+'&goods_id=0');
				}
            },
			call:function(){
				alert("暂未上线,敬请期待");
			},
			order_info:function(order_id){
				this.$router.push('/successfulTrade?order_id='+order_id);
			}
			
        }
    }
</script>
<style>
	.red{color: red;}
    .jia_more{
        height:1rem;
        width:100%;
        line-height:1rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
    }
    .all_payment1_p1 span{
        width:1.28rem;
        height:0.4rem;
        position:absolute;
        display:block;
        border-radius:0.1rem;
        font-size:0.2rem;
        line-height:0.4rem;
        text-align:center;
    }
    .all_payment1_p1 span:nth-of-type(1){
        color:#828282;
        border:1px solid #aeaeae;
        left:2.01rem;
        top:0.09rem;
    }
    .all_payment1_p1 span:nth-of-type(2){
        color:#828282;
        border:1px solid #aeaeae;
        left:3.45rem;
        top:0.09rem;
    }
    .all_payment1_p1 span:nth-of-type(3){
        color:#ff8811;
        border:1px solid #ff8811;
        left:4.89rem;
        top:0.09rem;
    }
    .all_payment1_p1{
        width: 100%;
        height:0.63rem;
        position:relative;
        /*border-bottom:1px solid #bdbdbd;*/
    }
    .all_payment1_p time{
        color:#ffaa55;
    }
    .all_payment1_p{
        height:0.47rem;
        width:100%;
        line-height:0.47rem;
        color:#3a3939;
        font-size:0.2rem;
        text-indent:3.2rem;
        /*  border-bottom:1px solid #bdbdbd;*/
    }

    .all_payment1_2 img{
        display:block;
        width:1.55rem;
        height:1.56rem;
        margin:0.12rem 0rem;
        flex:1;
    }
    .all_payment1_2{
        width:100%;
        height:1.81rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        display:flex;
    }
    .all_payment1_1 span:nth-of-type(1){
		display:none;
        height:0.24rem;
        width:0.58rem;
        border:1px solid #f0f0f0;
        color:#ff9933;
        background:#ffffff;
        position:absolute;
        font-size:0.16rem;
        top:0.19rem;
        left:0.17rem;
        line-height:0.24rem;
        text-align:center;
        border-radius:0.05rem;
    }
    .all_payment1_1 span:nth-of-type(2){
        float:left;
        height:0.61rem;
        width:2.89rem;
        text-align:center;
        line-height:0.61rem;
        color:#636363;
        font-size:0.2rem;
    }
    .all_payment1_1 span:nth-of-type(3){
        height:0.61rem;
        width:1.19rem;
        text-align:center;
        line-height:0.61rem;
        color:#ffaa55;
        font-size:0.23rem;
        font-weight:700;
        float:right;
    }
    .all_payment1_1{
        height:0.61rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    .all_payment1{
        height:3.74rem;
        width:100%;
    }
    .all_payment1_border{
        width:100%;
        height:0.12rem;
        background:#f5f4f2;
    }
	
    .jia_more{
        height:1rem;
        width:100%;
        line-height:1rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
    }
    .apply_p1 span{
        width:1.28rem;
        height:0.4rem;
        position:absolute;
        display:block;
        border-radius:0.1rem;
        font-size:0.2rem;
        line-height:0.4rem;
        text-align:center;
    }
    .apply_p1 span:nth-of-type(1){
        color:#828282;
        border:1px solid #aeaeae;
        right:1.71rem;
        top:0.09rem;
    }
    .apply_p1 span:nth-of-type(2){
        color:#828282;
        border:1px solid #aeaeae;
        right: 0.25rem;
        top:0.09rem;
    }
    .apply_p1 span:nth-of-type(3){
        color:#828282;
        border:1px solid #828282;
        left:4.89rem;
        top:0.09rem;
    }
    .apply_p1{
        width: 100%;
        height:0.63rem;
        position:relative;
       /* border-bottom:1px solid #bdbdbd;*/
    }
    .apply_p time{
        color:#fc37b2;
    }
    .apply_p{
        height:0.47rem;
        width:100%;
        line-height:0.47rem;
        color:#3a3939;
        font-size:0.2rem;
        text-indent:3.2rem;
        border-bottom:1px solid #f0f0f0;
    }
    .apply_2 span:nth-of-type(1){
        width:5.16rem;
        height:0.47rem;
        line-height:0.47rem;
        text-align:center;
        color:#353535;
        font-size:0.22rem;
        display:block;
        margin-top:0.14rem;
    }
    .apply_2 span:nth-of-type(2){
        width:5.16rem;
        text-align:center;
        height:0.4rem;
        line-height:0.4rem;
        color:#9e9e9e;
        font-size:0.18rem;
        display:block;
    }
    .apply_2 span:nth-of-type(3){
        width:0.8rem;
        height:0.47rem;
        display:block;
        position:absolute;
        line-height:0.47rem;
        text-align:center;
        color:#bdbdbd;
        font-size:0.18rem;
        right:0;
        top:0.13rem;
    }
    .apply_2 img{
        display:block;
        width:1.55rem;
        height:1.56rem;
        position:absolute;
        left:0.25rem;
        top:0.12rem;
    }
    .apply_2{
        width:100%;
        height:1.81rem;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    .apply_1 span:nth-of-type(1){
	display:none;
        height:0.24rem;
        width:0.58rem;
        border:1px solid #c8d3b2;
        color:#c8d3b2;
        background:#ffffff;
        position:absolute;
        font-size:0.16rem;
        top:0.19rem;
        left:0.17rem;
        line-height:0.24rem;
        text-align:center;
        border-radius:0.05rem;
    }
    .apply_1 span:nth-of-type(2){
        float:left;
        height:0.61rem;
        width:2.89rem;
        text-align:center;
        line-height:0.61rem;
        color:#636363;
        font-size:0.2rem;
    }
    .apply_1 span:nth-of-type(3){
        height:0.61rem;
        width:2.53rem;
        text-align:center;
        line-height:0.61rem;
        color:#cdcdcd;
        font-size:0.18rem;
        float:right;
    }
    .apply_1{
        height:0.61rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
    }
    .apply{
        height:3.82rem;
        width:100%;
    }
    .apply_border{
        width:100%;
        height:0.12rem;
        background:#f5f4f2;
    }
</style>